@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.marquee-direction-right {
  text-align: end;
  .marquee_container {
    animation-direction: reverse !important;
  }
}

.marquee--pause-on-mouseover {
  &:hover {
    .marquee_container {
      animation-play-state: paused;
    }
  }
}

.marquee_container {
  display: flex;
  align-items: center;
  animation: marquee var(--animation-speed) linear infinite;
  will-change: transform;
}


@keyframes fade-in {
  0% {
      opacity: 0;
  }

  to {
      opacity: 1;
  }
}